<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="680px"
      :show-close="false"
      :before-close="resetDialog">
      <div slot="title"
           style="display:flex;justify-content:space-between;">
        <div style="display:flex;justify-content:flex-start;font-weight:600;color:#404040;">
          <span style="font-size: 16px;color: #404040;">Advance</span>
        </div>
        <div style="color:#404040;font-weight:400">
          <span style="font-size:14px;padding:7px;margin-left:10px"
                class="cursor_pointer2 cuifont icon_dismiss"
                @click="dialogVisible=!dialogVisible"></span>
        </div>
      </div>
      <div style="height:100%" v-loading="loading">
        <div @click="openTable(item)" v-for="item in list" :key="item.id" :class="item.id===1?'':'cursor_pointer'" style="height:76px;display:flex;justify-content:space-between;align-items:center;box-shadow: 0px 1px 0px 0px rgba(240, 240, 240, 0.5);">
          <div>
            <div style="margin-bottom:10px;font-size: 16px;color: #404040;">{{item.name}}</div>
            <div style="font-size: 14px;color: #808080;">{{item.description}}</div>
          </div>
          <div v-if="item.id === 1">
            <el-switch @change=defaultInstallConfirm(appInfo.defaultInstall)
              v-model="appInfo.defaultInstall">
            </el-switch>
          </div>
          <div v-else  class="el-icon-arrow-right" style="margin-right:10px"></div>
        </div>
      </div>
    </el-dialog>
    <advanceTable ref="advanceTable"></advanceTable>
  </div>
</template>
<script>
import advanceTable from './advanceTable.vue'
export default {
  components: {
    advanceTable
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      appInfo: {},
      list: [
        { id: 1, name: 'Default Install', description: 'Install the current app as a built-in app, applicable to all tenants.' },
        { id: 2, name: 'Mandatory Install', description: 'Select tenants to forced-install the current app.' },
        { id: 3, name: 'Mandatory Uninstall', description: 'Select tenants to forced-uninstall the current app.' },
        { id: 4, name: 'Mandatory Update', description: 'Select tenants to forced-update the current app.' }
      ],
      id: null
    }
  },
  methods: {
    openTable (item) {
      if (item.id === 1) return false
      this.$refs.advanceTable.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.advanceTable.init(this.id, item)
      })
    },
    defaultInstallConfirm (defaultInstall) {
      var params = {
        defaultInstall: defaultInstall,
        id: this.appInfo.id
      }
      this.loading = true
      this.$interface.reports.postDefaultInstallApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.loading = false
            return this.$message.error(res.msg)
          }
          this.$message.success('Success')
          this.loading = false
        }).catch(() => { this.loading = false })
    },
    resetDialog () {
      Object.assign(this.$data, this.$options.data())
    },
    init (id) {
      this.appInfo = {}
      this.id = id
      var params = {
        id: id
      }
      this.loading = true
      this.$interface.reports.getAppInfoApi(params)
        .then(({ data: res }) => {
          this.loading = false
          this.$forceUpdate()
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.appInfo = res.data
        }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
.cursor_pointer {
  cursor: pointer;
}
.cursor_pointer2:hover {
  cursor: pointer;
  color: $--theme-color;
  background-color: $--theme-color-background;
  border-radius: 4px;
}
.more {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 .text_more {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bgc_hover:hover {
  background-color: $--theme-color-background;
  color: $--theme-color;
}
.color_hover:hover {
  color: $--theme-color!important;
}
::v-deep .el-dialog__header {
  height: 54px;
  box-shadow: 0px 1px 0px 0px rgba(240, 240, 240, 0.5);
}
::v-deep .el-dialog__body {
  height: 670px;
}

</style>
